<template>
  <div id="app" class="container">
    <div class="center">
      <h1><span class="label"> 登录</span></h1>
      <form @submit.prevent="submit">
        <div class="input-group">
          <span class="input-group-addon">用户名：</span>
          <input type="text" class="form-control" placeholder="请输入用户名" v-model="username">
        </div>
        <div class="input-group">
          <span class="input-group-addon">密&nbsp;&nbsp;&nbsp;码：</span>
          <input type="password" class="form-control" placeholder="请输入密码" v-model="password">
        </div>
        <div>
          <button id="btn-login" type="submit" data-loading-text="loading..." class="btn btn-success"
                  style="margin-right: 10px">登陆
          </button>
          <button id="btn-register" type="button" class="btn btn-danger" data-loading-text="loading..."
                  style="margin-left: 10px" @click="resigter">注册
          </button>
        </div>
      </form>
    </div>
    <loading-view :isVisible=isLoading></loading-view>
  </div>
</template>

<script>
  import Axios from '../../utils/axios';
  import LoadingView from "../widget/loading-view";
  import Cookies from './../../utils/cookies';
  import Constant from '../../utils/constant';

  export default {
    components: {LoadingView},
    name: "login",
    data: () => {
      return {
        username: '',
        password: '',
        isLoading: false
      }
    },
    methods: {
      // 注册
      resigter: function () {
        if (this.username.length < 6) {
          alert('用户名长度小于6，请填写正确的用户名!!!');
          return
        }
        if (this.password.length < 6) {
          alert('密码长度小于6，请填写正确的密码!!!');
          return
        }
        this.disabledBtnLogin(true);
        let that = this;
        Axios.post(
          Constant.URL_USER + '/register',
          {
            username: this.username,
            password: this.password
          }
        ).then(function (res) {
          // 访问成功
          if (200 === res.status) {
            that.disabledBtnLogin(false);
            let data = res.data;
            if (data['ret'] === -1) {
              alert(data['message'])
            } else if (data['ret'] === 0) {
              console.log('注册成功');
            }
          }
        }).catch(function (e) {
          that.disabledBtnLogin(false);
          alert(e)
        })
      },
      // 登陆
      submit: function () {
        if (this.username.length < 6) {
          alert('用户名长度小于6，请填写正确的用户名!!!');
          return
        }
        if (this.password.length < 6) {
          alert('密码长度小于6，请填写正确的密码!!!');
          return
        }
        this.disabledBtnRegister(true);
        let that = this;
        Axios.post(
          Constant.URL_USER + '/login',
          {
            username: this.username,
            password: this.password
          }
        ).then(function (res) {
          // 访问成功
          if (200 === res.status) {
            that.disabledBtnRegister(false);
            let data = res.data;
            if (data['ret'] === -1) {
              alert(data['message']);
            } else if (data['ret'] === 0) {
              console.log('登陆成功');
              Cookies.setCookie(Cookies.setCookie(Constant.LOGIN_INFO,
                JSON.stringify({
                  username: that.username,
                  password: that.password
                }), 30 * 24 * 3600));
              // 跳转页面
              // window.location.href = "./../pages/home.html";
              that.$router.push('/');
            }
          }
        }).catch(function (e) {
          that.disabledBtnRegister(false);
          alert(e)
        })
      },
      /**
       * 是否禁用注册按钮
       */
      disabledBtnRegister: function (isClick) {
        this.isLoading = isClick;
        // 灰掉仍可点击
        // $('#btn-register').addClass('disabled');
        // 灰掉不可点击
        $('#btn-register').prop('disabled', isClick);
      },
      /**
       * 是否禁用登陆按钮
       */
      disabledBtnLogin: function (isClick) {
        this.isLoading = isClick;
        $('#btn-login').prop('disabled', isClick);
      }
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100%;
    background: url("./../../assets/img/login_bg.jpg") no-repeat fixed center center;
    background-size: cover;
  }

  .center {
    background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
    border-radius: 50px;
    width: 350px;
    height: 300px;
    margin: 80px auto;
    display: block;
    text-align: center;
  }

  .center > h1 > span {
    letter-spacing: 10px;
  }

  .center > form {
    margin: 0 20px;
  }

  .center > form > div {
    margin-top: 30px;
  }
</style>
